import { ref, defineComponent } from 'vue';
import { basicComponents } from './config/data';
import ComponentPrecut from './components/component-precut/index.jsx';
import formPrecut from './components/form-precut/index.jsx';

import './index.scss';

export default defineComponent({
  name: 'customForm',
  setup() {
    console.log('customForm', ComponentPrecut);
    // 左侧组件区域
    const componentPrecut = () => {
      return (
        <div class='component-precut'>
          <ComponentPrecut title='基础组件' list={basicComponents} />
        </div>
      );
    };
    // 中间预览区域
    const previewModule = () => {
      return (
        <div class='preview-module'>
          <formPrecut />
        </div>
      );
    };
    // 右侧配置区域
    const configModule = () => {
      return <div class='config-module'></div>;
    };

    return () => (
      <div class='customForm'>
        {componentPrecut()}
        {previewModule()}
        {configModule()}
      </div>
    );
  },
});
